/**
 * 学习目标：掌握列表渲染 - 数组渲染
 * 作用： 类似v-for
 * key口诀： 💥有id用id，没id找唯一， 没唯一用索引
 */
import React from 'react';
import ReactDOM from 'react-dom';

const songs = ['温柔', '倔强', '私奔到月球'];

const liNodes1 = songs.map((item) => {
  return <li key={item}>{item}</li>;
});

const divNode = (
  <div>
    <ul>{liNodes1}</ul>

    <ul>
      {songs.map((item) => (
        // 可以的作用，提高diff算法，更新效率与vue中的key，作用一模一样
        <li key={item}>{item}</li>
      ))}
    </ul>
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
